<template>
    <div class="app-container">
        <!-- 床位信息 -->
        <el-table :data="bedList" v-loading="loading">
            <el-table-column label="楼号" prop="houseName" :show-overflow-tooltip="true" align="center" />
            <el-table-column label="层号" prop="floorNo" align="center" />
            <el-table-column label="房间号" prop="roomNo" align="center" />
            <el-table-column label="床位号" prop="bedNo" align="center" />
            <el-table-column label="学生" prop="studentname" align="center">
                <template slot-scope="scope">
                    {{ scope.row.studentname }}
                    <i v-if="scope.row.isLeader == '0'" @click="assignPresident(scope.row)" v-show="scope.row.studentname"
                        class="el-icon-s-custom"></i>
                    <i v-else v-show="scope.row.studentname" style="color: #1890ff;" class="el-icon-s-custom"></i>

                    <el-button v-show="!scope.row.studentname" size="mini" type="text" v-hasPermi="['dorm:bed:change']"
                        @click="assignBed(scope.row)">分配</el-button>
                </template>
            </el-table-column>

            <el-table-column label="入住时间" show-overflow-tooltip prop="stayTime" align="center" />
            <el-table-column label="电话" prop="mobile" align="center" />
            <el-table-column label="院系" show-overflow-tooltip prop="college" align="center" />
            <el-table-column label="班级" show-overflow-tooltip prop="className" align="center" />
            <el-table-column label="辅导员" prop="counsellorName" align="center" />
            <el-table-column label="辅导员电话" prop="counsellorPhone" align="center" />
            <el-table-column label="标记" prop="smark" align="center">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.basic_student_mark" :value="scope.row.smark"></dict-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180" fixed="right" v-hasPermi="['dorm:bed:remove']">
                <template slot-scope="scope">
                    <el-button size="mini" v-show="scope.row.studentname" type="text"
                        @click="clearStudent(scope.row)">清除学生</el-button>
                    <!-- <el-button size="mini" v-show="scope.row.studentname" type="text"
                        @click="assignBed(scope.row)">重新分配</el-button> -->
                    <!-- <el-button size="mini" type="text" @click="showStudent(scope.row)">学生详情</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="床位分配" :visible.sync="bedAllcation" width="70%" append-to-body>
            <el-form style="min-height: 50vh;" ref="form" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="注册号或姓名：" prop="studentName">
                            <el-input v-model="studentName" placeholder="请输入注册号或姓名" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item style="float: right;margin-right: 20px;">
                            <el-button @click="getStudentInfo">查询</el-button>
                            <!-- <el-button v-else type="primary" @click="addBedStudent">分配</el-button> -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <template v-if="studentInfo">
                    <el-descriptions style="padding: 0 20px;margin-bottom: 10px;" border title=""
                        v-for="item in studentInfo" :key="item.registerCode">
                        <el-descriptions-item label="姓名">{{ item.name }}</el-descriptions-item>
                        <!-- <el-descriptions-item label="性别">{{ item.mobile }}</el-descriptions-item> -->
                        <el-descriptions-item label="手机号">{{ item.mobile }}</el-descriptions-item>
                        <el-descriptions-item label="所在院部">{{ item.deptNames }}</el-descriptions-item>
                        <el-descriptions-item label="班级">{{ item.className }}</el-descriptions-item>
                        <el-descriptions-item label="注册号">{{ item.registerCode }}</el-descriptions-item>
                        <el-descriptions-item label="入学时间">{{ item.joinDate }}</el-descriptions-item>
                        <el-descriptions-item label="民族">
                            <dict-tag :options="dict.type.bc_nation_type" :value="item.nation"></dict-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="身份证号">{{ item.cardCode }}</el-descriptions-item>
                        <!-- <el-descriptions-item label="身份证号">{{ item.cardCode }}</el-descriptions-item> -->

                        <!-- <el-descriptions-item label="毕业时间	">{{ studentInfo.guaduateDate }}</el-descriptions-item> -->
                        <el-descriptions-item label="操作"><el-button type="text"
                                @click="addBedStudent(item)">分配</el-button></el-descriptions-item>

                    </el-descriptions>

                </template>

            </el-form>
        </el-dialog>
        <!-- 手动分配 -->
        <!-- <el-dialog title="批量床位分配" :visible.sync="manualVisible" width="60%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="60px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="学号" prop="nickName">
                            <el-input placeholder="请输入学号" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <el-button>验证</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="楼号" prop="nickName">
                            <el-select v-model="queryParams.value1" multiple placeholder="请选择楼号" style="width: 100%">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="房间号" prop="nickName">
                            <el-select v-model="queryParams.value1" multiple placeholder="请选择房间号" style="width: 100%">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="manualVisible = false">取 消</el-button>
            </div>
        </el-dialog> -->
        <!-- <studentInfors ref="saveDialog" :forms="showStateInfo" :deptOptions="deptOptions" title="学生信息"></studentInfors> -->
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { studentList, queryStudentInfoByParam } from "@/api/information/studentInfor"
import studentInfors from "@/views/components/student/index";


export default {
    components: { studentInfors },
    data() {
        return {
            loading: false,
            bedAllcation: false,
            // 床位信息弹出层
            openBed: false,
            studentName: '',//学号信息
            // 存放学号查出来的学生信息
            studentInfo: null,
            // 存放表格点击床位信息后的房间表格数据
            roomDataInfo: null,
            bedDataInfo: null,
            showStateInfo: null,
            manualVisible: false,
            deptOptions: {},
            visible: false
        };
    },
    dicts: ["bc_nation_type", "basic_student_mark"],
    computed: {
        ...mapState({
            bedList: state => state.roomBedList.list,
        })
    },
    watch: {
        roomId: async function () {
            this.loading = true
            await this.getRoomBedList({ roomId: this.roomId })
            this.loading = false
        }
    },
    props: {
        roomId: {
            type: Number
        }
    },
    async created() {
        this.loading = true
        await this.getRoomBedList({ roomId: this.roomId })
        this.loading = false
    },
    methods: {
        ...mapActions({
            getRoomBedList: 'roomBedList/getTable',
            addBedInfo: 'roomBedList/addInfo',
            delBedInfo: 'roomBedList/delInfoById',
            updateBedInfo: 'roomBedList/updateBedInfo'
        }),

        // 床位分配
        assignBed(row) {
            this.bedAllcation = true;
            this.bedDataInfo = row;
            this.studentInfo = null;
            this.studentName = ""
        },

        // 验证学号
        async getStudentInfo() {
            if (!this.studentName) {
                this.$message.error('请输入要验证的学号');
                return
            }
            const { data, code } = await queryStudentInfoByParam({ keywords: this.studentName })
            if (code == 200) {
                // this.studentName = ""
                this.studentInfo = data
            }
        },

        // 学生床位分配后
        async addBedStudent(studentInfo) {
            if (!studentInfo) {
                this.$message.error("请查询学生信息后再操作！")
                return
            }

            const { data, code } = await this.addBedInfo({
                roomId: this.roomId,
                bedId: this.bedDataInfo.bedId,
                studentId: studentInfo.id
            })

            if (code == 200) {
                this.$message.success("分配宿舍成功。");
                this.bedAllcation = false
                this.getRoomBedList({ roomId: this.roomId })
            }

        },

        // 清除学生出宿舍
        async clearStudent(row) {
            const { data, code } = await this.delBedInfo({
                bedIds: row.bedId,
            })

            if (code == 200) {
                this.$message.success("清除床位成功。");
                this.getRoomBedList({ roomId: this.roomId })
            }
        },

        // 查询学生详情
        async showStudent(row) {
            const { data, code } = await queryStudentInfoByParam({ keywords: row.studentNo })
            this.showStateInfo = data[0]
            this.$refs.saveDialog.openDia();
            this.$refs.saveDialog.getGradeInfor();
        },

        // 分配社长
        assignPresident(e) {
            this.$confirm(`确定要将${e.studentname}分配为${e.roomNo}的社长吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.updateBedInfo({ ...e, isLeader: 1, id: e.useBedId }).then(res => {
                    if (res.code == 200) {
                        this.getRoomBedList({ roomId: this.roomId })
                        this.$message.success("分配宿舍长成功")
                    }
                })
            }).catch(() => {

            });

        }
    },

};
</script>

<style>
.el-icon-s-custom {
    cursor: pointer;

}
</style>